<extend name="template/base_index" />


<block name="area_header">

</block>

<block name="area_body">
	<div class="container">
		<div class="form-horizontal">


			<div class="form-group">
				<label class="control-label col-lg-2 col-md-2">省份</label>
				<div class="col-lg-10 col-md-10">
					<select id="province" class="form-control" name="province">
							<option value="">请选择省份</option>
						<volist name="provinces" id="vo">
							<option value="{$vo.provinceid}">{$vo.province}</option>
						</volist>
					</select>
				</div>

			</div>
			<div class="form-group">
				<label class="control-label col-lg-2 col-md-2">城市</label>
				<div class="col-lg-10 col-md-10">
					<select id="city" class="form-control" name="city">
							<option value="">请先选择省份</option>
					</select>
				</div>
			</div>

			<div class="form-group">
				<label class="control-label col-lg-2 col-md-2">区</label>
				<div class="col-lg-10 col-md-10">
					<select id="area" class="form-control" name="city">
						<option value="">请先选择城市</option>
					</select>
				</div>
			</div>

		</div>
	</div>
</block>

<block name="area_footer">
	<script>
		function appendToArea(data){
					$("#area").removeClass("txt-gray");
					var area = $("#area");
					area.empty();
					if(!data){
						area.parent().addClass("hide");
						return ;
					}
					if(data.length > 0){
						area.parent().removeClass("hide");
					}
					for(var i=0;i<data.length;i++){
						var ele = $("<option></option>");
						ele.text(data[i].area).attr("value",data[i].areaid).appendTo(area);
					}
		}
		function appendToCity(data){
				var city = $("#city");
				city.empty();//.append("<option value=''>请先选择省份</option>")
				for(var i in data){
					var ele = $("<option></option>");
					ele.text(data[i].city).attr("value",data[i].cityid).appendTo(city);
				}
		}
		$(function(){
			$("#province").change(function(){
				var provinceID = $("#province").val();
				console.log(provinceID);
				if(provinceID){
					$.post("{:U('TestCity/getCitys')}",{provinceid:provinceID}).done(function(data){
						console.log(data);
						if(data.status){
							appendToCity(data.info);
						}else{
							
						}
					});
				}
			});
			$("#city").change(function(){
					$("#city").removeClass("txt-gray");
					var cityID = $("#city").val();
//					console.log(cityID);
					if(cityID){
						$("#pcaloading").show();
						$.post("{:U('Tool/City/getArea')}",{cityid:cityID},function(data){
//							console.log(data);
							if(data.status){
								appendToArea(data.info);					
							}else{
								
							}
							$("#pcaloading").hide();
						});
					}
			});
		})
	</script>
</block>